<template>
  <view
    class="filter-wrapper"
    :style="{
      height: height + 'rpx',
      top: top,
      'border-top': border ? '1rpx solid #f2f2f2' : 'none',
    }"
    @touchmove.stop.prevent="discard"
  >
    <view class="inner-wrapper">
      <view
        class="mask"
        :class="showMask ? 'show' : 'hide'"
        @tap="tapMask"
      ></view>
      <view class="navs">
        <!-- 布局样式 -->
        <view
          class="c-flex-align"
          :class="{
            'c-flex-center': index > 0,
            'right c-flex-aligin': index == navData.length - 1,
            actNav: index === actNav,
          }"
          v-for="(item, index) in navData"
          :key="index"
          @click="navClick(index)"
        >
          <!-- v-if改v-show -->
          <view
            v-for="(child, childx) in item"
            :key="childx"
            v-show="child.select"
            >{{ child.name }}</view
          >
          <image
            src="https://i.loli.net/2020/07/15/QsHxlr1gbSImvWt.png"
            mode=""
            class="icon-triangle"
            v-if="index === actNav"
          ></image>
          <image
            src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png"
            mode=""
            class="icon-triangle"
            v-else
          ></image>
        </view>
      </view>
      <scroll-view
        scroll-y="true"
        class="popup"
        :class="popupShow ? 'popupShow' : ''"
      >
        <view
          class="item-opt c-flex-align"
          :class="item.select ? 'actOpt' : ''"
          v-for="(item, index) in navData[actNav]"
          :key="index"
          @click="handleOpt(index)"
        >
          {{ item.name }}
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// import { getCurDateTime } from '@/libs/utils.js';
export default {
  props: {
    height: {
      type: Number,
      default: 108,
    },
    top: {
      type: String,
      default: "calc(var(--window-statsu-bar) + 44px)",
    },
    border: {
      type: Boolean,
      default: false,
    },
    filterData: {
      //必填
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultIndex: {
      //默认选中条件索引,超出一类时必填
      type: Array,
      default: () => {
        return [0];
      },
    },
  },
  data() {
    return {
      navData: [],
      popupShow: false,
      showMask: false,
      actNav: null,
      selDate: "选择日期",
      selIndex: [], //选中条件索引
    };
  },
  created() {
    let that = this;
    // 修复微信小程序选项设置问题
    setTimeout(function () {
      that.navData = that.filterData;
      that.selIndex = that.defaultIndex;
      that.keepStatus();
    }, 200);
  },
  mounted() {
    // this.selDate = getCurDateTime().formatDate;
  },
  methods: {
    keepStatus() {
      this.navData.forEach((itemnavData) => {
        itemnavData.map((child) => {
          child.select = false;
        });
        return itemnavData;
      });
      for (let i = 0; i < this.selIndex.length; i++) {
        let selindex = this.selIndex[i];
        this.navData[i][selindex].select = true;
      }
    },
    navClick(index) {
      if (index === this.actNav) {
        this.tapMask();
        return;
      }
      this.popupShow = true;
      this.showMask = true;
      this.actNav = index;
    },
    handleOpt(index) {
      this.selIndex[this.actNav] = index;
      this.keepStatus();
      setTimeout(() => {
        this.tapMask();
      }, 100);
      let data = [];
      let res = this.navData.forEach((item) => {
        let sel = item.filter((child) => child.select);
        data.push(sel);
      });
      console.log(data);
      this.$emit("onSelected", data);
    },
    dateClick() {
      this.tapMask();
    },
    tapMask() {
      this.showMask = false;
      this.popupShow = false;
      this.actNav = null;
    },
    handleDate(e) {
      let d = e.detail.value;
      this.selDate = d;
      this.$emit("dateChange", d);
    },
    discard() {},
  },
};
</script>

<style lang="scss" scoped>
page {
  font-size: 24rpx;
}
.c-flex-align {
  display: flex;
  align-items: center;
  text-align: left;
}
.c-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.filter-wrapper {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 999;
  .inner-wrapper {
    // position: relative;
    .navs {
      position: relative;
      height: 80rpx;
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      border-bottom: 2rpx solid #f5f6f9;
      color: #2e2e2e;
      z-index: 999;
      box-sizing: border-box;
      & > view {
        // flex: 1;
        height: 100%;
        flex-direction: row;
        z-index: 999;
      }
      .right {
        justify-content: flex-end;
      }
      .actNav {
        color: #252525;
      }
    }
    .mask {
      z-index: 666;
      position: fixed;
      top: calc(var(--status-bar-height) + 44px);
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0);
      transition: background-color 0.15s linear;
      &.show {
        background-color: rgba(0, 0, 0, 0.01);
      }
      &.hide {
        display: none;
      }
    }
    .popup {
      position: relative;
      max-height: 500rpx;
      background-color: #fff;
      border-bottom-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      overflow: scroll;
      z-index: 999;
      transition: all 1s linear;
      opacity: 0;
      display: none;
      .item-opt {
        height: 80rpx;
        padding: 0 40rpx;
        color: #8b9aae;
        border-bottom: 2rpx solid #f5f6f9;
      }
      .actOpt {
        color: #f9864d;
        font-weight: bold;
        position: relative;
        &::after {
          content: "✓";
          font-weight: bold;
          font-size: 36rpx;
          position: absolute;
          right: 40rpx;
        }
      }
    }
    .popupShow {
      display: block;
      opacity: 1;
    }
  }

  .icon-triangle {
    width: 16rpx;
    height: 16rpx;
    margin-left: 10rpx;
  }
}
</style>
